@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto Regular'), local('Roboto-Regular'), url(http://themes.googleusercontent.com/static/fonts/roboto/v10/2UX7WLTfW3W8TclTUvlFyQ.woff) format('woff');
}

* {
  margin: 0;
  padding: 0;
}


html, body {
  height: 100%;
  font-family: Roboto, -apple-system-font, Helvetica, Arial, Verdana, sans-serif;
  font-size: 17px;
  overflow: hidden;
  background-color: #333;
}

button {
	-moz-box-shadow:inset 0px 1px 3px 0px #91b8b3;
	-webkit-box-shadow:inset 0px 1px 3px 0px #91b8b3;
	box-shadow:inset 0px 1px 3px 0px #91b8b3;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #768d87), color-stop(1, #6c7c7c));
	background:-moz-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
	background:-webkit-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
	background:-o-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
	background:-ms-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
	background:linear-gradient(to bottom, #768d87 5%, #6c7c7c 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#768d87', endColorstr='#6c7c7c',GradientType=0);
	background-color:#768d87;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	border:1px solid #566963;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:arial;
	font-size:15px;
	font-weight:bold;
	padding:11px 23px;
	text-decoration:none;
	text-shadow:0px -1px 0px #2b665e;
}
button:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #6c7c7c), color-stop(1, #768d87));
	background:-moz-linear-gradient(top, #6c7c7c 5%, #768d87 100%);
	background:-webkit-linear-gradient(top, #6c7c7c 5%, #768d87 100%);
	background:-o-linear-gradient(top, #6c7c7c 5%, #768d87 100%);
	background:-ms-linear-gradient(top, #6c7c7c 5%, #768d87 100%);
	background:linear-gradient(to bottom, #6c7c7c 5%, #768d87 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#6c7c7c', endColorstr='#768d87',GradientType=0);
	background-color:#6c7c7c;
}
button:active {
	position:relative;
	top:1px;
}

#actionbar {
  font-size: 28px;
  font-weight: bold;
  color: #ddd;
  margin: 0;
  padding: 4px;
  height: 32px;
  vertical-align: top;
  text-transform: uppercase;
}

#rhythm-control {
  display: block;
  width: 8px;
  height: 8px;
  border: 1px solid black;
  background-color: rgba(50, 50, 50, 1.0);
  -moz-transition: background-color ease 0.17s, border-color ease 0.17s;
  -o-transition: background-color ease 0.17s, border-color ease 0.17s;
  -webkit-transition: background-color ease 0.17s, border-color ease 0.17s;
  transition: background-color ease 0.17s, border-color ease 0.17s;
}

  #rhythm-control.active {
    background-color: rgb(12, 160, 37);
  }

  #rhythm-control.pulse {
    -moz-transition: background-color ease 0.17s, border-color ease 0.17s;
    -o-transition: background-color ease 0.17s, border-color ease 0.17s;
    -webkit-transition: background-color ease 0.17s, border-color ease 0.17s;
    transition: background-color ease 0.17s, border-color ease 0.17s;
    background-color: rgb(160, 255, 160);
    border-color: #ccc;
  }

#up-button {
  margin-right: 8px;
}

#content {
    color: #ddd;
    padding: 4px;
}

    #content p {
      margin: 1ex auto;
    }

    #content a {
      color: #aaa;
      text-decoration: none;
    }

    #content a:hover {
      text-decoration: underline;
    }

    #content em {
      background-color: #555;
      padding-left: 0.3em;
      padding-right: 0.3em;
    }


p.stack {
  font-size: 9px !important;
  font-family: 'Arial Narrow', 'Nimbus Sans L', sans-serif;
}

.hide {
  display: none;
  opacity: 0;
  -moz-transition: opacity ease 0.5s;
  -o-transition: opacity ease 0.5s;
  -webkit-transition: opacity ease 0.5s;
  transition: opacity ease 0.5s;
}

.show {
  display: block;
  opacity: 1;
  -moz-transition: opacity ease 0.5s;
  -o-transition: opacity ease 0.5s;
  -webkit-transition: opacity ease 0.5s;
  transition: opacity ease 0.5s;
}

#app {
  overflow: hidden;
}

#logon {
  text-align: center;
  padding: 20% 8px 8px;
  background-color: #333;
  color: #eee;
  height: 100%;
  overflow: hidden;
}

  #logon h1 {
    line-height: 150%;
  }

  #logon footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    padding: 0.5ex 1em;
    font-size: smaller;
  }

  #logon a {
    text-decoration: none;
    color: #e8e8e8;
  }

  #logon a:hover {
    text-decoration: underline;
  }

  #logon a:visited {
    color: #d8d8d8;
  }

  #loader-icon {
    background-image: url(../img/ajax-loader.gif);
    width: 43px;
    height: 11px;
    margin: 12px auto;
    display: block;
  }

#user-info {
  display: inline-block;
}

#user-photo {
  display: block;
  width: 50px;
  height: 50px;
  border: 1px solid #444;
  margin: 0 auto;
  padding: 0;
}

#user-name {
  display: block;
  margin: 0 auto;
}

#logout-button {
  cursor: pointer;
  font-size: smaller;
}

  #logout-button:hover {
    text-decoration: underline;
  }

#map-canvas {
  position: absolute;
  top: 0;
  bottom: 44px;
  left: 0;
  right: 0;
}

#info-bar-container {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 44px;
  background-color: #333;
}

#info-bar {
  position: absolute;
  line-height: 44px;
  display: inline-block;
  font-size: 16px;
  color: #ddd;
  left: 0;
  right: 0;
  -webkit-text-shadow: #000 1px 1px 0, #000 -1px 1px 0, #000 -1px -1px 0, #000 1px -1px 0;
  text-shadow: #000 1px 1px 0, #000 -1px 1px 0, #000 -1px -1px 0, #000 1px -1px 0;
  overflow: hidden;
}

#userid {
  display: inline-block;
  overflow: hidden;
  width: 44px;
  height: 44px;
  background-image: url(../img/default-avatar.jpg);
  background-position: left top;
  background-repeat: no-repeat;
  -moz-background-size: cover;
  -o-background-size: cover;
  -webkit-background-size: cover;
  background-size: cover;
  -moz-transition: opacity ease-in-out 0.1s;
  -o-transition: opacity ease-in-out 0.1s;
  -webkit-transition: opacity ease-in-out 0.1s;
  transition: opacity ease-in-out 0.1s;
}

#menu-container {
  position: absolute;
  display: inline-block;
  top: 0;
  right: 0;
  width: 44px;
  height: 44px;
  overflow: hidden;
  white-space: nowrap;
  border-left: 1px solid #999;
}

#settings-icon {
  position: absolute;
  display: inline-block;
  width: 44px;
  height: 44px;
  top: 0;
  right: 0;
  background-image: url(../img/settings-icon.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-color: transparent;
  cursor: pointer;
}

#settings-icon.active {
  background-color: #ccc;
}

#settings-icon.offline {
  background-color: #c33;
}

#settings-icon.offline.pending-locations {
  background-color: #f93;
}

#settings-icon.pending-locations {
  background-color: #bd0;
}

#buddy-container {
  position: absolute;
  right: 44px;
  left: 44px;
  overflow: hidden;
  white-space: nowrap;
  -moz-transition: opacity ease-in-out 0.25s;
  -o-transition: opacity ease-in-out 0.25s;
  -webkit-transition: opacity ease-in-out 0.25s;
  transition: opacity ease-in-out 0.1s;
}

.opaque {
  -moz-transition: opacity ease-in-out 0.25s;
  -o-transition: opacity ease-in-out 0.25s;
  -webkit-transition: opacity ease-in-out 0.25s;
  transition: opacity ease-in-out 0.1s;
  opacity: 0.5;
}

#buddies {
  display: inline-block;
  text-wrap: none;
}

.buddy {
  cursor: pointer;
  display: inline-block;
  overflow: hidden;
  text-align: center;
  width: 44px;
  height: 44px;
  background-image: none;
  background-position: left top;
  background-repeat: no-repeat;
  -moz-background-size: cover;
  -o-background-size: cover;
  -webkit-background-size: cover;
  background-size: cover;
}

#settings {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 44px;
  background-color: rgba(55, 55, 55, 0.9);
  color: #eee;
  -webkit-text-shadow: #000 1px 1px 0;
  text-shadow: #000 1px 1px 0;
  padding: 6px;
  overflow: auto;
}

#settings label {
  font-weight: bold;
}

#settings .hint {
  font-size: smaller;
  margin-bottom: 4px;
}

#settings .hint:before {
  content: '(';
}

#settings .hint:after {
  content: ')';
}

#settings table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

#settings table td:first-child {
  text-align: right;
}

#settings td, tr, th {
  vertical-align: top;
  padding: 4px;
}

#settings tr {
  border-top: 1px solid #999;
}

#settings th {
  text-align: left;
  font-weight: bold;
}

#settings .sp-replacer {
  margin: 2px 0 4px 0;
  display: inline-block;
  vertical-align: top;
}

#track-file-loader-icon {
  width: 16px;
  height: 11px;
  background-image: url(../img/loader-38-0.gif);
  background-repeat: no-repeat;
  display: inline-block;
}

.loader-5-0 {
  display: inline-block;
  width: 44px;
  height: 4px;
  background-image: url(../img/loader-5-0.gif);
  background-repeat: no-repeat;
  background-position: 6px 6px;
}

#avatar {
  border: 1px solid #222;
  -moz-background-size: contain;
  -o-background-size: contain;
  -webkit-background-size: contain;
  background-size: contain;
  background-position: left top;
  background-repeat: no-repeat;
  background-image: url(../img/default-avatar.jpg);
  margin: 2px 0 4px 0;
  display: inline-block;
  vertical-align: top;
}

#avatar.over {
  background-image: none;
  background-color: #aaf815;
}

header {
  font-weight: bold;
  text-align: center;
  display: block;
}

canvas {
	image-rendering: optimizeSpeed;
}

#popup {
  position: absolute;
  top: 5px;
  bottom: 55px;
  left: 5px;
  right: 5px;
  display: block;
  margin: 5px auto;
  width: 80%;
  height: 80%;
  max-width: 200px;
  max-height: 300px;
  background-color: #333;
  border: 1px solid #555;
  box-shadow: rgba(255, 255, 255, 0.5) 0px 0px 4px;
  z-index: 99999999;
  color: #eee;
  cursor: pointer;
  padding: 5px;
  font-size: smaller;
  opacity: 0;
}

#popup h1 {
  font-size: 22px;
  margin: 1ex 0 1.5ex 0;
  text-align: center;
  border-bottom: 1px solid #aaa;
  padding-bottom: 0.7ex;
}

#popup p {
  font-size: 14px;
  margin: 1ex 0 1.5ex 0;
}

#popup button {
  padding: 1ex;
  position: absolute;
  bottom: 5px;
  left: 5px;
  right: 5px;
}

.barberpole {
  background-color: transparent;
  background-image: -webkit-linear-gradient(-45deg, rgba(255, 154, 26, 1) 25%, transparent 25%, transparent 50%, rgba(255, 154, 26, 1) 50%, rgba(255, 154, 26, 1) 75%, transparent 75%, transparent);
  background-image: -moz-linear-gradient(-45deg, rgba(255, 154, 26, 1) 25%, transparent 25%, transparent 50%, rgba(255, 154, 26, 1) 50%, rgba(255, 154, 26, 1) 75%, transparent 75%, transparent);
  background-image: linear-gradient(-45deg, rgba(255, 154, 26, 1) 25%, transparent 25%, transparent 50%, rgba(255, 154, 26, 1) 50%, rgba(255, 154, 26, 1) 75%, transparent 75%, transparent);
  -webkit-background-size: 44px 44px;
  -moz-background-size: 44px 44px;
  -o-background-size: 44px 44px;
  background-size: 44px 44px;
  -webkit-box-shadow: inset 0 22px 0 rgba(255, 255, 255, .2);
  -moz-box-shadow: inset 0 22px 0 rgba(255, 255, 255, .2);
  -ms-box-shadow: inset 0 22px 0 rgba(255, 255, 255, .2);
  box-shadow: inset 0 22px 0 rgba(255, 255, 255, .2);
  -webkit-animation: move 0.5s linear infinite;
  -moz-animation: move 0.5s linear infinite;
  -o-animation: move 0.5s linear infinite;
  animation: move 0.5s linear infinite;
  background-position: 0 0;
}

@-webkit-keyframes move {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 44px 0;
  }
}

@-moz-keyframes move {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 44px 0;
  }
}

@-ms-keyframes move {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 44px 0;
  }
}

@keyframes move {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 44px 0;
  }
}


/* iPhone / iPod Touch */
@media screen and (max-device-width: 480px) {
  body {
    -webkit-text-size-adjust: none;
    font-family: Helvetica, Arial, Verdana, sans-serif;
  }
}
/* iPhone mit Retina Display */
@media only screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
}
/* iPad */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation : landscape) {
}
/* */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation : portrait) {
}
